<template>
  <div class="win-op no-drag">
    <div
      v-if="showSetTop"
      :class="['iconfont  icon-pin', isTop ? 'win-top' : '']"
      :title="isTop ? '取消置顶' : '置顶'"
      @click="top"
    ></div>
    <div v-if="showMin" class="iconfont icon-zuixiaohua" title="最小化" @click="minimize"></div>
    <div
      v-if="showMax"
      :class="['iconfont', isMax ? 'icon-zuidahua' : 'icon-3zuidahua-1']"
      :title="isMax ? '向下还原' : '最大化'"
      @click="maximize"
    ></div>
    <div v-if="showClose" class="iconfont icon-guanbi" title="关闭" @click="close"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const emit = defineEmits(['closeCallback'])
const props = defineProps({
  showSetTop: {
    type: Boolean,
    default: true
  },
  showMin: {
    type: Boolean,
    default: true
  },
  showMax: {
    type: Boolean,
    default: true
  },
  showClose: {
    type: Boolean,
    default: true
  },
  // 0 关闭 1 隐藏
  closeType: {
    type: Number,
    default: 1
  }
})

const isTop = ref(false)
const isMax = ref(false)

onMounted(() => {
  isMax.value = false
  isTop.value = false
})

function top() {
  isTop.value = !isTop.value
  winOpen('top', { isTop: isTop.value })
}

function minimize() {
  winOpen('minimize')
}

function maximize() {
  if (isMax.value) winOpen('unmaximize')
  else {
    winOpen('maximize')
  }
  isMax.value = !isMax.value
}

function close() {
  winOpen('close', { closeType: props.closeType })
  emit('closeCallback')
}

function winOpen(action, data) {
  window.ipcRenderer.send('winTitleOp', { action, data })
}
</script>

<style scoped lang="scss">
.win-op {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  .iconfont {
    width: 24px;
    height: 24px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-align: center;
    transition: 0.2s;
    &:hover {
      background-color: rgba($color: #fff, $alpha: 0.2);
      color: #fff;
    }
  }
  .icon-guanbi:hover {
    background-color: rgba($color: hsl(357, 59%, 66%), $alpha: 1);
    border-top-right-radius: 8px;
  }
  .win-top {
    color: var(--base-color);
  }
}
</style>
